<!--
 * @Author: wangming
 * @Date: 2021-04-23 15:25:10
 * @LastEditors: wangming
 * @LastEditTime: 2021-04-23 17:54:46
 * @Description: 基础信息
-->
<template>
  <el-form ref="form" class="pl40 pt20" label-width="100px">
    <el-form-item :label="$t('sys.userInfo_avatar')">
      <el-avatar style="background-color: #fff" :size="100" :src="getUserVal.avatar || defaultAvatar"></el-avatar>
    </el-form-item>
    <el-form-item :label="$t('sys.account_number')">{{ getUserVal.username }}</el-form-item>
    <el-form-item :label="$t('sys.name')">{{ getUserVal.name }} </el-form-item>
    <el-form-item :label="$t('sys.email')">{{ getUserVal.email }} </el-form-item>
    <el-form-item :label="$t('sys.cellphone_number')"> {{ getUserVal.mobile }}</el-form-item>
    <el-form-item :label="$t('sys.userOrgName')">
      <div class="ks-row-middle" style="height: 32px">
        <el-tag
          class="mr10"
          v-for="(i, index) in orgList"
          :key="index"
          :style="{ order: i.main ? -1 : index }"
          >{{ i.name }}
          <span class="f10" v-if="i.main">({{$t('sys.main_department')}})</span>
        </el-tag>
      </div>
    </el-form-item>
    <el-form-item :label="$t('sys.position')"> {{ getUserVal.position }}</el-form-item>
    <el-form-item :label="$t('sys.hidNo')"> {{ getUserVal.hidNo }}</el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import defaultAvatar from '@/assets/image/defaultAvatar.png'
export default {
  computed: {
    ...mapGetters(["getUserVal"]),
    orgList() {
      let orgList = this.getUserVal.orgList || [];
      let orgId = this.getUserVal.orgId || [];
      return orgList.map((i) => Object.assign({ main: orgId === i.id }, i));
    },
  },
  data() {
    return {
      defaultAvatar
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
